<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>全选按钮</title>
    <style>
      table {
        border-collapse: collapse;
      }
      td {
        border-collapse: collapse;
        border: 1px solid gray;
        padding: 0 20px;
      }
      tr {
        height: 30px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <td><input type="checkbox" class="all" /></td>
          <td>商品</td>
          <td>价格</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" /></td>
          <td>iphone8</td>
          <td>8000</td>
        </tr>
        <tr>
          <td><input type="checkbox" /></td>
          <td>iphone8</td>
          <td>8000</td>
        </tr>
        <tr>
          <td><input type="checkbox" /></td>
          <td>iphone8</td>
          <td>8000</td>
        </tr>
      </tbody>
    </table>
    <script>
      var btn_all = document.querySelector(".all");
      var btns = document.querySelector("tbody").querySelectorAll("input");

      btn_all.onclick = function () {
        for (let i = 0; i < btns.length; i++) btns[i].checked = this.checked;
      };
      for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
          var flag = true;
          for (let j = 0; j < btns.length; j++) {
            if (!btns[j].checked) {
              flag = false;
            }
          }
          console.log(flag);
          btn_all.checked = flag;
        };
      }
    </script>
  </body>
</html>
